<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/main.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/product/search.css">


    <title>商品列表-搜索</title>
</head>

<body>
    <div id="app" v-cloak>
        <headers></headers>
        <side_nav></side_nav>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <searchs></searchs>
            <car_box></car_box>

        </div>
        <!-- <li v-for='(item,index) in list'>111</li> -->
        <!-- 商品分类 -->
        <div class="class_box wrap">
            <div class="sub_nav_box">
                <div class="product_class fl">
                    商品分类
                </div>
                <ul class="sub_nav fl">
                    <li @click='seckilling'>限时秒杀</li>
                    <li @click='group_buy'>团购优惠</li>
                    <li @click='cyc_buy'>周期购</li>
                    <li @click='integral'>积分商城</li>
                </ul>
            </div>
        </div>

        <div class="shop_class wrap">
            <span class="cursor" @click='all_list'>全部商品</span>  &gt; <span v-for='(item,index) in Crumbs' v-if="Crumbs[index].value!=''" class="class_details">{{item.value}} <img src="../images/icon_del_3.png" @click='del_Crumbs(item.value,index)' class="details_del cursor" alt=""></span>
        </div>
        <!-- 分类 -->
        <div class="style_box wrap">
            <div class="style_item">
                <div class="style_tit fl">
                    分类：
                </div>
                <div class="style_details">
                    <span class="cursor fl style_details_span" v-for='(item,index) in categoryList' :class="{active:categoryList.active_index === index}" @click='fenlei(item.id,index,item.showName)'>{{item.showName}}</span>
                </div>
                <!-- <div class="more">
                    <div class="more_btn fl">更多</div>
                    <div class="more_down fl"><img src="../images/icon_down.png" alt=""></div>
                    <div class="more_check fl">
                        <img src="../images/icon_jia.png" alt="" class="fl">
                        <span>多选</span>
                    </div>
                </div> -->
            </div>
            <div class="style_item"  v-show='brandList!=""'>
                <div class="style_tit fl">
                    品牌：
                </div>
                <!-- <div class="brand_details more_details"> -->
                <div class="style_details">
                    <span class="cursor fl style_details_span" v-for='(item,index) in brandList' :class="{active:brandList.active_index === index}" @click='pinpai(item.id,index,item.brandName)'>{{item.brandName}}</span>
                </div>
                <!-- <div class="more">
                    <div class="more_btn fl">更多</div>
                    <div class="more_down fl"><img src="../images/icon_down.png" alt=""></div>
                    <div class="more_check fl">
                        <img src="../images/icon_jia.png" alt="" class="fl">
                        <span>多选</span>
                    </div>
                </div> -->
            </div>
       
            <div class="style_item" @click='mores(findex)' :class="{style_item_active:style_index===findex}" v-for='(items,findex) in propertyList' v-show='propertyList !=""'>
                <div class="style_tit fl">
                    {{items.propertyName}}：
                </div>
                <div class="style_details">
                    <el-checkbox  v-for='(item,index) in items.valueList' @change='shuxing(items.id,item.id,index,findex)' size='mini'  v-model="item.active">{{item.propertyValue}}</el-checkbox>
                    <!-- <span class="cursor" v-for='(item,index) in items.valueList' :class="{active:item.active}" @click='shuxing(items.id,item.id,index,findex)'>{{item.propertyValue}}</span> -->
                </div>
                <div class="more">
                    <div class="more_btn cursor fl" >更多</div>
                    <div class="more_down fl"><img src="../images/icon_down.png" alt=""></div>
                    <!-- <div class="more_check fl"> -->
                        <!-- <img src="../images/icon_jia.png" alt="" class="fl"> -->
                        <!-- <span>多选</span> -->
                    <!-- </div> -->
                </div>
                <div class="style_item_btn" v-show="style_index===findex">
                    <div class="style_submit cursor fl" @click='shuxing_submit'>
                        确定
                    </div>
                    <div class="style_cancel cursor fl" @click='noactive'>
                        取消
                    </div>
                </div>
            </div>
            <!-- <div class="style_item">
                <div class="style_tit fl">
                    价格：
                </div>
                <div class="style_details">
                    <span>50-99</span>
                    <span>100-190</span>
                    <span>200-299</span>
                    <span>300以上</span>
                    <span>1-49</span>
                    <div class="style_money">
                        <input type="text" class="money_input">
                        -
                        <input type="text" class="money_input">
                        <input type="button" value='确定' class="money_submit">
                    </div>
                </div>
            </div> -->
                
        </div>

        <div class="sort wrap">
            <div class="sort_list">
                <span class="cursor" :class="{active:nav_index == 0}" @click='orderType(0)'>综合</span>
                <span class="cursor" :class="{active:nav_index == 1}" @click='orderType(1)'>销量</span>
                <!-- <li>新品</li> -->
                <span class="cursor" v-show='rise' @click='orderTypes(2)'>价格 <img src="../images/icon_decline.png" alt=""></span>
                <span class="cursor" v-show='!rise'  @click='orderTypes(3)'>价格 <img src="../images/icon_rise.png" alt=""></span>
            </div>
        </div>
        <!-- 产品列表 -->
        <div class="you_like wrap">
            <div class="like_item fl" v-for='(item,index) in product_list'>
                <div class="like_product cursor" @click='product_detail(item.id)'>
                    <img :src="item.coverImg" alt="">
                </div>
                <div class="product_price">
                    <div class="now_price">
                        <span>￥</span>{{item.showPrice}}
                    </div>
                    <div class="sell_num fr">
                        销量<span>{{item.salesQuantity}}</span>
                    </div>
                </div>
                <p class="product_introduce">{{item.spuName}}</p>
                <div class="business">
                    <img src="../images/icon_qiye.png" alt="">
                    <span class="business_name">{{item.addStr}}</span>
                    <!-- <span class="business_address fr">天津</span> -->
                </div>
            </div>
            <div class="integral_page search_integral_page fl">
                <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"   :page-size='20' :total="total" class="page_list">
                </el-pagination>
            </div>
        </div>
       
       <div class="wrap clear_both">             <productfooter></productfooter>         </div>
    </div>
 

    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/axios.js"></script>         <script src="../js/qs.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    car_active:false,
                    groups:3,
                    books:20,
                    categoryList:'',
                    brandList:'',
                    product_list:'',
                    total:0,
                    propertyList:'',
                    pids:'',
                    fids:'',
                    nav_index:0,
                    status:0,
                    sids:0,
                    propertyValues:[],
                    Crumbs:[{value:'', fid:'',pid:''},{value:'',pid:'',fid:''},{value:''}],
                    wrod:'',
                    rise:false,
                    checked:false,
                    style_index:''
                };
            },
            components: {

            },
            mounted() {
                console.log(this.wrod)
                this.fids = this.GetQueryString().id
                this.get_navlist(1)
            },
            methods: {
                handleCurrentChange(value){
                    console.log(value)
                    app.get_navitem(this.pids,this.fids,this.status,this.propertyValues,value)
                },
                // 全部商品列表
                all_list(){
                    this.fids = ''
                    this.pids = ''
                    this.get_navlist(1)
                },
                // 排序
                orderTypes(status){
                    this.rise = !this.rise
                    this.nav_index = status
                    this.status = status
                    app.get_navitem(this.pids,this.fids,this.status,this.propertyValues,1)
                    // app.get_navitem(this.pids,this.fids,status,1)
                },
                orderType(status){
                    this.nav_index = status
                    this.status = status
                    app.get_navitem(this.pids,this.fids,this.status,this.propertyValues,1)
                },  
                // 删除面包屑
                del_Crumbs(value,index){
                    for (let i = 0; i <  this.Crumbs.length; i++) {
                        if (this.Crumbs[i].value == value) {
                            this.Crumbs[i].value =''
                            this.Crumbs[i].pid =''
                            this.Crumbs[i].fid =''
                            if (i==0) {
                                this.fids = ''
                            }else if(i==1){
                                this.pids = ''
                            }
                        }
                    }
                    if (this.Crumbs.length>0) {
                        var fid = this.Crumbs[0].fid
                        var pid = this.Crumbs[1].pid
                    }else if(this.Crumbs.length==0||this.Crumbs.length<0){
                        this.fids=''
                        this.pid=''
                        fid = ''
                        pid = ''
                        this.Crumbs[0].value = ''
                        this.Crumbs[0].fid = ''
                        // this.Crumbs[0].pid = ''
                        // this.Crumbs[1].value = ''
                        // this.Crumbs[1].fid = ''
                        // this.Crumbs[1].pid = ''
                    } else if (fid =='') {
                        fid = this.fids
                        pid = this.pid
                    }
                    if (index==2) {
                        this.propertyValues=[]
                    }
                    app.get_navitem(pid,fid,this.status,this.propertyValues,1)
                },
                // 分类 品牌 属性
                shuxing(propertyId,id,index,findex){
                    console.log(this.propertyList[findex].valueList[index].active)
                    this.propertyList[findex].valueList[index].active = !this.propertyList[findex].valueList[index].active
                    if (this.propertyList[findex].valueList[index].active == true) {
                        this.propertyList[findex].valueList[index].active = false
                    }else{
                        this.propertyList[findex].valueList[index].active = true
                    }
                },
                noactive(){
                    this.style_index=''
                },
                shuxing_submit(){
                    var id_list 
                    this.propertyValues = []
                    var value = ''
                    for (let i = 0; i < app.propertyList.length; i++) {
                        for (let j = 0; j < app.propertyList[i].valueList.length; j++) {
                            if (app.propertyList[i].valueList[j].active==true) {
                                id_list = {
                                    id:app.propertyList[i].id,
                                    propertyId:app.propertyList[i].valueList[j].id
                                }
                                this.propertyValues.push(id_list)
                                value += app.propertyList[i].valueList[j].propertyValue+','
                            }else{
                                id_list=''
                            }
                        }
                    }
                    // console.log(value)
                    this.Crumbs[2].value = value
                    app.get_navitem(this.pids,this.fids,this.status,this.propertyValues,1)
                },
                mores(index){
                    this.style_index = index
                },
                
                fenlei(fid,index,name){
                    this.wrod=''
                    this.fids = fid
                    this.Crumbs[0].value = name
                    this.Crumbs[0].fid = fid
                    this.Crumbs[0].pid = this.pids
                    app.get_navitem(this.pids,this.fids,this.status,0,1)
                },
                pinpai(pid,index,name){
                    this.pids = pid
                    this.Crumbs[1].value = name
                    this.Crumbs[1].fid = this.fids
                    this.Crumbs[1].pid = pid
                    // this.Crumbs.push({
                    //     value:name,
                    //     pid:pid,
                    //     fid:this.fids
                    // })
                    app.get_navitem(pid,this.fids,this.status,0,1)
                },
                get_navitem(pid,fid,status,propertyValues,page){
                    axios({
                        method:"POST",
                        url:base_url + "/web/mdse/queryMdseList",
                        data:{
                            brandId:pid,
                            categoryId:fid,
                            orderType: status,
                            pageNum: page,
                            pageSize: 20,
                            keyWords:this.wrod,
                            propertyValues:this.propertyValues
                        },
                        headers:{
                            'Content-Type':'application/JSON',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.style_index = ''
                        app.categoryList = res.data.data.categoryList
                        app.brandList = res.data.data.brandList
                        app.product_list = res.data.data.pageInfo.list
                        app.propertyList = res.data.data.propertyList.map(function (item) {
                            var new_item = item
                            new_item.valueList = new_item.valueList.map(function (items) {
                                var new_items = items
                                new_items.active = false
                                return new_items
                            })
                            return new_item
                        })
                        console.log(app.propertyList)
                        app.total = res.data.data.pageInfo.total
                        app.product_list = res.data.data.pageInfo.list
                        // window.location.reload()
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },

                // 获取列表
                GetQueryStrings(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]); return null;
                },
                get_navlist(page){
                    this.wrod = decodeURIComponent(this.GetQueryString().keyword)
                    if (this.wrod==''||this.wrod=='undefined'||this.wrod=='null') {
                        console.log(this.word == undefined)
                        this.wrod = ''
                    }
                    axios({
                        method:"POST",
                        url:base_url + "/web/mdse/queryMdseList",
                        data:{
                            categoryId:this.GetQueryString().id,
                            orderType: 0,
                            pageNum: page,
                            pageSize: 20,
                            keyWords:this.wrod
                        },
                        headers:{
                            'Content-Type':'application/JSON',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.categoryList = res.data.data.categoryList
                        if (decodeURIComponent(app.GetQueryString().value)==''||decodeURIComponent(app.GetQueryString().value)==undefined||decodeURIComponent(app.GetQueryString().value)==null) {
                            app.Crumbs[0].value = decodeURIComponent(app.GetQueryString().value)
                            app.Crumbs[0].fid = app.fids
                        }
                        // app.categoryList.active_index = ''
                        app.brandList = res.data.data.brandList
                        app.brandList.active_index = ''
                        app.product_list = res.data.data.pageInfo.list
                        app.propertyList = res.data.data.propertyList.map(function (item) {
                            var new_item = item
                            new_item.valueList = new_item.valueList.map(function (items) {
                                var new_items = items
                                new_items.active = false
                                return new_items
                            })
                            return new_item
                        })
                        app.total = res.data.data.pageInfo.total
                        app.get_navitem('',app.fids,0,1)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },


                // 显示购物车               
                go_shop_car(){                          
                    window.location.href='../product/shop_car.html'  
                },
                car_box(){
                    this.car_active = !this.car_active
                },
                seckilling(){
                    window.location.href='../discount/seckilling.html'
                },
                cyc_buy(){
                    window.location.href='../discount/cyc_buy.html'
                },
                group_buy(){
                    window.location.href='../discount/group_buy.html'
                },
                integral(){
                    window.location.href='../integral/integral.html'
                },
                product_detail(id){
                    window.location.href='product_detail.html?id='+id
                },
                GetQueryString() {
                    var obj = new Object()
                    var scan_url = window.location.href.split('?')[1];
                    var strs = scan_url.split('&');
                    for(var x in strs) {
                        var arr = strs[x].split('=');
                        obj[arr[0]] = arr[1]
                    }
                    return obj
                }
            }
        })
    </script>
</body>

</html>